<template>
    <div class="page page_container">
      <group>
           <x-input title="验证码" v-model="verifyCode"  :max="18" placeholder="请输入验证码"></x-input>
      </group>
      <div class="buttonbox" @click="submit">
           提交
      </div>
    </div>
</template>


<script>
import { XInput,Group } from 'vux';
import {synCard} from "../../methods/request.js" 
export default {
  // 最顶部黑色栏
  data () {
    return {
      verifyCode:""
    }
  },
  components: {
    XInput,
    Group
  },
  created(){
      this.$store.commit('increment',"填写验证码")
      this.route = Object.assign({}, this.$route);
  
  },
  methods:{
      submit(){
        //提交
        synCard({"verifyCode":this.verifyCode,"cardPhone":this.route.query.cardPhone}).then(
                response => {
                    if(response.data.rspCode == "0000"){
                            Toast({ message:'绑定手机号成功！',position: 'middle', duration: 3000 });
                            this.$router.push({
                                path: "/personalCenter",
                            });
                      }
                  }).catch(error => console.log(error) );
       }
  }
};
</script>
<style lang="less" scoped>
@import "~src/components/css/gloState.less";
.page{ 
    // position: fixed;
    // top: 46px;
    // width: 100%;
    // height: 100%;
    // background-color:#f1f2f3;
    // overflow-x:auto;
    .title{
        width: 100%;
        padding: 0 10px 0 10px;
        text-align: left;
        line-height: 30px;
        height: 30px;
    }
}
</style>
